<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>12利用事件冒泡实现表格编辑效果.html</title>
	<style>
		table{width:90%;border:1px solid #ddd;border-collapse: collapse;}
		td,th{border:1px solid #ddd;}
		td input{width:100%;box-sizing: border-box;}
	</style>
	<script>
		window.onload = function(){
			// 表格可编辑
			// 点击单元格时，替换成input标签

			// 获取所有的单元格
			var datalist = document.getElementsByClassName('datalist')[0];


			// 把事件绑定到table
			// 绑定一次事件
			datalist.onclick = function(e){
				e = e || window.event;

				var target = e.target || e.srcElement;
				console.log(target.tagName);

				var tagName = target.tagName.toLowerCase();

				// 删除当前行
				if(tagName === 'button'){
					var currentTr = target.parentElement.parentElement;
					currentTr.parentElement.removeChild(currentTr);

					// datalist.deleteRow(currentTr.rowIndex);
				}

				// 即时编辑
				else if(tagName === 'td'){
					var currentTr = target.parentElement;

					// 如果是第一个td或是最后一个td，则不进入编辑状态
					if(target == currentTr.firstElementChild || target == currentTr.lastElementChild){
						return;
					}

					var input = document.createElement('input');
					input.type = 'text';

					input.value = target.innerHTML;

					target.innerHTML = '';
					target.appendChild(input);

					input.focus();


					// 失去焦点时
					// 把内容写回td
					input.onblur = function(){
						target.innerHTML = input.value;
					}
				}

			}
		}
	</script>
</head>
<body>
	<table class="datalist">
		<thead>
			<tr>
				<th width="5%">序号</th>
				<th width="17%">标题1</th>
				<th width="17%">标题2</th>
				<th width="17%">标题3</th>
				<th width="17%">标题4</th>
				<th width="17%">标题5</th>
				<th width="10%">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>2</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>3</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>4</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>5</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>6</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>7</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>8</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>9</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
			<tr>
				<td>10</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td><button>删除</button></td>
			</tr>
		</tbody>
		
	</table>
</body>
</html>